<template>
  <div id="box">
    <div class="title">
      <i class="el-icon-menu"></i>
      <h1 class="title-name">销售管理</h1>
    </div>
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="">
          <el-dropdown @command="sumTypeCkeck">
            <el-button type="primary">
              {{ sumType }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in sumTypeArray"
                :key="index"
                v-text="item"
                :command="item"
              ></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="form.year"
            placeholder="年"
            @change="yearChange"
            style="width: 120px"
          >
            <el-option
              v-for="item in years"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.month" placeholder="月" style="width: 120px">
            <el-option value=""></el-option>
            <el-option label="一月" value="1"></el-option>
            <el-option label="二月" value="2"></el-option>
            <el-option label="三月" value="3"></el-option>
            <el-option label="四月" value="4"></el-option>
            <el-option label="五月" value="5"></el-option>
            <el-option label="六月" value="6"></el-option>
            <el-option label="七月" value="7"></el-option>
            <el-option label="八月" value="8"></el-option>
            <el-option label="九月" value="9"></el-option>
            <el-option label="十月" value="10"></el-option>
            <el-option label="十一月" value="11"></el-option>
            <el-option label="十二月" value="12"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" v-show="show">
          <el-input
            v-model="form.eid"
            placeholder="请输入员工工号"
            @input="getName(1, form.eid)"
          ></el-input>
        </el-form-item>
        <el-form-item label="" v-show="isshow">
          <el-select
            v-model="form.classA"
            placeholder="一类商品"
            style="width: 140px"
            @change="changeSelect"
          >
            <el-option
              v-for="(item, index) in classAs"
              :key="index"
              :label="item.classname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" v-show="isshow">
          <el-select
            v-model="form.classB"
            placeholder="二类商品"
            style="width: 140px"
            @change="changeSelectB"
          >
            <el-option
              v-for="(item, index) in classBs"
              :key="index"
              :label="item.classname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          style="float: right; margin-right: 50px"
          @click="query"
          >查找</el-button
        >
      </el-form>
    </div>
    <!-- <div class="box"></div> -->
    <div id="myChart" :style="{ width: '800px', height: '400px' }"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      isshow: false,
      typevalue: "",
      xData: [],
      profit: [],
      sales: [],
      title: "",
      form: {
        year: "",
        month: "",
        eid: "",
        classA: "",
        classB: "",
        date: "",
      },
      sumTypeArray: ["员工", "商品类别"],
      sumType: "统计方式",
      classAs: [],
      classBs: [],
      name: "",
    };
  },
  created() {
    this.init();
    this.getClassA();
  },
  methods: {
    init() {
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取当前年
      this.initSelectYear(year);
      this.form.year = year;
    },
    initSelectYear(year) {
      this.years = [];
      for (let i = 0; i < 10; i++) {
        this.years.push({ value: year - i, label: year - i + "年" });
      }
    },
    yearChange(value) {
      this.form.year = value;
    },
    sumTypeCkeck(value) {
      // 下拉列表的点击事件
      // console.log(value);
      this.sumType = value;
      if (value == "员工") {
        this.show = true;
        this.isshow = false;
        this.typevalue = 1;
      } else if (value == "商品类别") {
        this.show = false;
        this.isshow = true;
        this.typevalue = 2;
      }
    },
    //select二级联动
    changeSelect() {
      //console.log(this.searchParams.classA)
      this.getName(this.typevalue, this.form.classA);
      this.form.classB = "";
      this.classBs = [];
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        params: {
          mode: 0,
          limit: 8,
          page: 1,
        },
      })
        .then((res) => {
          //console.log(res);
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].superclass == this.form.classA) {
              this.classBs.push(res.data.data[i]);
              //   console.log(this.classBs);
            }
          }
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    //获取一级类别
    getClassA() {
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        params: {
          mode: 0,
          limit: 100,
          page: 1,
        },
      })
        .then((res) => {
          //console.log(res);
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].superclass == 0) {
              this.classAs.push(res.data.data[i]);
              //console.log(this.classAs);
            }
          }
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    //二级类别
    changeSelectB() {
      if (this.form.classB != "") {
        this.getName(this.typevalue, this.form.classB);
      }
    },
    //根据id查找名称
    getName(type, value) {
      if (type == 1) {
        this.$axios({
          method: "post",
          url: "http://server.hloli.cn:23300/api/selEmployee",
          params: {
            so: this.form.eid,
            limit: 8,
            page: 1,
          },
        })
          .then((res) => {
            //console.log(res);
            this.name = res.data.data[0].name;
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          });
      } else {
        this.$axios({
          method: "post",
          url: "http://server.hloli.cn:23300/api/selProductCategory",
          params: {
            mode: 0,
            limit: 8,
            page: 1,
          },
        })
          .then((res) => {
            //console.log(res);
            for (let i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].id == value) {
                this.name = res.data.data[i].classname;
              }
            }
            //console.log(this.name)
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          });
      }
    },
    //时间戳转为时间(只要月份)
    shijianchuo(value) {
      var date = new Date(value);
      // console.log(date)
      var M = date.getMonth() + 1;
      return M;
    },
    //查询
    query() {
      //console.log(this.form);
      this.profit = [];
      this.sales = [];
      if (this.form.year != "") {
        if (this.form.month != "") {
          this.date = this.form.year + "-" + this.form.month + "-02";
          var date1 = new Date(this.date);
          // console.log(date1);
          var time = date1.getTime();
          // console.log(time);
        } else {
          this.date = this.form.year + "-" + "1-01";
          var date1 = new Date(this.date);
          // console.log(date1);
          var time = date1.getTime();
          // console.log(time);
        }
      }
      if (this.form.classA != "") {
        //console.log(this.form.classA)
        if (this.form.classB != "") {
          //console.log(this.form.classB)
          this.form.eid = this.form.classB;
        } else {
          this.form.eid = this.form.classA;
        }
      }
      var id = parseInt(this.form.eid);
      if (this.form.year != "") {
        if (this.form.month != "") {
          this.$axios({
            method: "post",
            url: "http://server.hloli.cn:23300/api/selStatistics",
            params: {
              type: this.typevalue,
              time: time,
              eid: id,
            },
          })
            .then((res) => {
              console.log(res);
              this.profit[0] = res.data.data[0].statistics;
              this.sales[0] = res.data.data[0].sales;
              this.drawLine();
            })
            .catch(function (error) {
              console.log(error);
            });
          if (this.typevalue == 1) {
            if (this.form.eid != "") {
              this.title =
                this.form.year +
                "年" +
                this.form.month +
                "月" +
                this.name +
                "的";
              this.xData = [this.form.month + "月"];
              this.drawLine();
            } else {
              alert("请输入员工工号！");
            }
          } else {
            if (this.form.classA != "") {
              this.title =
                this.form.year +
                "年" +
                this.form.month +
                "月" +
                this.name +
                "的";
              this.xData = [this.form.month + "月"];
              this.drawLine();
            } else {
              this.title =
                this.form.year + "年" + this.form.month + "月所有商品的";
              this.xData = [this.form.month + "月"];
              this.drawLine();
            }
          }
        } else {
          this.$axios({
            method: "post",
            url: "http://server.hloli.cn:23300/api/selStatistics",
            params: {
              type: this.typevalue,
              time: time,
              eid: id,
            },
          })
            .then((res) => {
              console.log(res);
              for (var i = 0; i < res.data.data.length; i++) {
                var M = this.shijianchuo(res.data.data[i].time);
                this.profit[M - 1] = res.data.data[i].statistics;
                this.sales[M - 1] = res.data.data[i].sales;
              }
              this.drawLine();
            })
            .catch(function (error) {
              console.log(error);
            });
          this.xData = [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ];
          if (this.typevalue == 1) {
            if (this.form.eid != "") {
              this.title = this.form.year + "年" + this.name + "的";
              this.drawLine();
            } else {
              alert("请输入员工工号！");
            }
          } else {
            if (this.form.classA != "") {
              this.title = this.form.year + "年" + this.name + "的";
              this.drawLine();
            } else {
              this.title = this.form.year + "年所有商品的";
              this.drawLine();
            }
          }
        }
      } else {
        alert("请选择查询条件！");
      }
      this.form.eid = "";
      this.form.classA = "";
      this.form.classB = "";
      //this.form={brand_right:0}
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.title + "\n" + "盈利统计和销量统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["盈利统计", "销量统计"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "盈利统计",
            type: "bar",
            data: this.profit,
          },
          {
            name: "销量统计",
            type: "bar",
            data: this.sales,
          },
        ],
      });
    },
  },
};
</script>
<style scoped  lang="less">
// #box{
//   width: 1000px;
//   height: 100%;
// }
.title {
  height: 50px;
  border-bottom: 1px solid #d7d7d7;
  line-height: 50px;
}
.el-icon-menu {
  line-height: 50px;
  font-size: 30px;
  color: #666666;
  float: left;
}
.search {
  padding: 8px;
  margin-top: 20px;
  line-height: 70px;
  // width: 1600px;
  height: 70px;
  background-color: #f8f7f7;
  border-radius: 6px;
}
#box {
  margin-top: 20px;
  // width: 1580px;
  padding: 20px;
  height: 500px;
  background-color: #f8f7f7;
  border-radius: 6px;
}
.title-name {
  font-size: 20px;
  margin-left: 15px;
  color: #797979;
  float: left;
}
.el-form-item {
  margin-left: 10px;
}
//  .el-dropdown {
//     vertical-align: top;
//   }
//   .el-dropdown + .el-dropdown {
//     margin-left: 15px;
//   }
//   .el-icon-arrow-down {
//     font-size: 12px;
//   }
</style>